<template>
	<!--另一个模板里面的样式-->
<el-dialog
    title="新增权限"
    :visible.sync="showAddNew"
    width="30%"
    :before-close="handleClose">
    <!--执行判断的样式-->
    <el-form :model="permissionInfo" :rules="rules" ref="permissionInfo">
        <!--表格-->
        <table>
            <tr>
                <td class="title">权限名称</td>
                <td class="content">
                    <el-form-item prop="permissionName">
                        <el-input v-model="permissionInfo.permissionName"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">父级权限</td>
                <td class="content">
                    {{parentDesc}}
                </td>
            </tr>
            <tr>
                <td class="title">权限描述</td>
                <td class="content">
                    <el-form-item prop="permissionDesc">
                        <el-input v-model="permissionInfo.permissionDesc"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">排列序号</td>
                <td class="content">
                    <el-form-item prop="sortNum">
                    <el-input v-model="permissionInfo.sortNum"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">权限等级</td>
                <td class="content">
                    <!-- <el-input v-model="permissionInfo.permissionLeve"></el-input>    -->
                 <el-select v-model="permissionInfo.permissionLeve" placeholder="请选择">
                    <el-option
                    v-for="item in 5"
                    :key="item"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
                </td>
            </tr>
        </table>
    </el-form>
    
    <!--element里面的模板-->
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addNewOne">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
export default{
	//父传子的方法,数据传递接收
	props:['showAddNew','parentid','parentDesc'],
	data(){
		//自定义的验证规则
		var checkNum = (rule,value,callBack)=>{
			var re = /[^0-9]/ig;
			//如果为true则表示输入的内容中有非数字,则直接提示错误
			if(re.test(value)){
				return callback(new Error("请输入正确数字"));
			}
			callBack();
		}
		return {
			permissionInfo:{},
			rules:{
				permissionName:[
					{required:true,message:'请输入权限名称',trigger:'blur'},
					{min:2,message:'名称最少两个字符',trigger:'blur'}
				],
				permissionDesc:[
					{required:true,message:'请输入权限描述',trigger:'blur'},
					{min:4,message:'描述不能少于4个字',tigger:'blur'}
				],
				sortNum:[
					{required:true,message:'请输入排序号',trigger:'blur'},
					{validator:checkNum,trigger:'blur'}
				]
			}
		}
	},
	methods:{
		//取消的时候关闭页面
		handleClose(){
			this.$parent.showAddNew = false;
		},
		//点确认按钮的时候,执行该函数
		addNewOne(){
			//element里面的模板
			this.$refs['permissionInfo'].validate((valid)=>{
				if(valid){
					//提交新权限
//					this.permissionInfo.parentid = 0;
					this.permissionInfo.parentid = this.parentid;
//					console.log(this.permissionInfo);
					this.$http.post(this.$apis.addNewPermission,this.permissionInfo)
					.then((resp)=>{
						console.log(resp);
						this.$parent.showAddNew = false;
						
					})
				}else{
					console.log("还有未验证通过的");
					return false;
				}
			})
		}
	}
}	
</script>

<style lang='scss' scoped>
	tr{
		padding: 5px;
	}
	.title{
		width: 30%;
	}
	.content{
		width: 70%;
	}
</style>